<template>
  <view class="min-h-screen bg-gray-50">
    <!-- 系统导航栏覆盖层 -->
    <view class="fixed top-0 left-0 right-0 z-50 bg-orange-500 h-[176rpx]">
      <!-- 状态栏区域 -->
      <view class="h-[88rpx]"></view>
      <!-- 导航栏区域 -->
      <view class="px-[32rpx] py-[24rpx] flex items-center">
        <view class="w-[48rpx] h-[48rpx] flex items-center justify-center mr-[24rpx]" @tap="goBack">
          <text class="text-[32rpx] text-white">‹</text>
        </view>
        <text class="text-[36rpx] font-bold text-white flex-1 text-center">商品详情</text>
        <view class="w-[48rpx]"></view>
      </view>
    </view>
    
    <!-- 内容区域顶部间距 -->
    <view class="h-[176rpx]"></view>

    <!-- 商品图片 -->
    <view class="relative">
      <image 
        :src="productDetail.image" 
        class="w-full h-[400rpx] object-cover"
        mode="aspectFill"
      />
    </view>

    <!-- 商品基本信息 -->
    <view class="bg-white px-[32rpx] py-[32rpx]">
      <text class="text-[36rpx] font-bold text-gray-800 block mb-[8rpx]">{{ productDetail.name }}</text>
      <text class="text-[28rpx] text-gray-600 block mb-[16rpx]">{{ productDetail.description }}</text>
      <view class="flex items-center justify-between">
        <text class="text-[48rpx] font-bold text-red-500">¥{{ productDetail.price }}</text>
        <view class="flex items-center">
          <text class="text-[24rpx] text-gray-500 mr-[32rpx]">销量 {{ productDetail.sales }}</text>
          <text class="text-[24rpx] text-gray-500">评分 {{ productDetail.rating }}</text>
        </view>
      </view>
    </view>

    <!-- 商品详情 -->
    <view class="bg-white px-[32rpx] py-[32rpx] mt-[20rpx]">
      <text class="text-[32rpx] font-bold text-gray-800 block mb-[24rpx]">商品详情</text>
      <text class="text-[28rpx] text-gray-600 leading-[1.6]">{{ productDetail.detailDescription }}</text>
    </view>

    <!-- 规格选择 -->
    <view class="bg-white px-[32rpx] py-[32rpx] mt-[20rpx]">
      <text class="text-[32rpx] font-bold text-gray-800 block mb-[24rpx]">选择规格</text>
      
      <!-- 大小选择 -->
      <view class="mb-[32rpx]">
        <text class="text-[28rpx] text-gray-800 block mb-[16rpx]">大小</text>
        <view class="flex gap-[16rpx]">
          <view 
            v-for="size in sizeOptions" 
            :key="size.id"
            class="px-[24rpx] py-[12rpx] rounded-[8rpx] border cursor-pointer"
            :class="selectedSize === size.id ? 'border-orange-500 bg-orange-500 text-white' : 'border-gray-300 bg-white'"
            @tap="selectSize(size)"
          >
            <text class="text-[28rpx]" :class="selectedSize === size.id ? 'text-white' : 'text-gray-800'">
              {{ size.name }}
            </text>
          </view>
        </view>
      </view>

      <!-- 温度选择 -->
      <view class="mb-[32rpx]">
        <text class="text-[28rpx] text-gray-800 block mb-[16rpx]">温度</text>
        <view class="flex gap-[16rpx] flex-wrap">
          <view 
            v-for="temp in tempOptions" 
            :key="temp.id"
            class="px-[24rpx] py-[12rpx] rounded-[8rpx] border cursor-pointer"
            :class="selectedTemp === temp.id ? 'border-orange-500 bg-orange-500 text-white' : 'border-gray-300 bg-white'"
            @tap="selectTemp(temp)"
          >
            <text class="text-[28rpx]" :class="selectedTemp === temp.id ? 'text-white' : 'text-gray-800'">
              {{ temp.name }}
            </text>
          </view>
        </view>
      </view>

      <!-- 甜度选择 -->
      <view>
        <text class="text-[28rpx] text-gray-800 block mb-[16rpx]">甜度</text>
        <view class="flex gap-[16rpx] flex-wrap">
          <view 
            v-for="sweet in sweetOptions" 
            :key="sweet.id"
            class="px-[24rpx] py-[12rpx] rounded-[8rpx] border cursor-pointer"
            :class="selectedSweet === sweet.id ? 'border-orange-500 bg-orange-500 text-white' : 'border-gray-300 bg-white'"
            @tap="selectSweet(sweet)"
          >
            <text class="text-[28rpx]" :class="selectedSweet === sweet.id ? 'text-white' : 'text-gray-800'">
              {{ sweet.name }}
            </text>
          </view>
        </view>
      </view>
    </view>

    <!-- 数量选择 -->
    <view class="bg-white px-[32rpx] py-[32rpx] mt-[20rpx]">
      <view class="flex items-center justify-between">
        <text class="text-[32rpx] font-bold text-gray-800">数量</text>
        <view class="flex items-center">
          <view 
            class="w-[60rpx] h-[60rpx] rounded-[8rpx] border border-gray-300 flex items-center justify-center cursor-pointer"
            @tap="decreaseQuantity"
          >
            <text class="text-[32rpx] text-gray-600">-</text>
          </view>
          <text class="mx-[32rpx] text-[32rpx] font-medium">{{ quantity }}</text>
          <view 
            class="w-[60rpx] h-[60rpx] rounded-[8rpx] bg-orange-500 flex items-center justify-center cursor-pointer"
            @tap="increaseQuantity"
          >
            <text class="text-[32rpx] text-white">+</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部安全区域，为固定按钮留出空间 -->
    <view class="h-[200rpx]"></view>

    <!-- 底部操作栏 -->
    <view class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 px-[32rpx] py-[24rpx] z-40 safe-area-inset-bottom">
      <view class="flex items-center justify-between mb-[16rpx]">
        <text class="text-[24rpx] text-gray-500">总价</text>
        <text class="text-[36rpx] font-bold text-red-500">¥{{ totalPrice.toFixed(2) }}</text>
      </view>
      
      <!-- 按钮组 -->
      <view class="flex gap-[16rpx]">
        <view 
          class="flex-1 h-[88rpx] bg-white border-2 border-orange-500 rounded-[8rpx] flex items-center justify-center"
          @tap="addToCart"
        >
          <text class="text-[32rpx] font-medium text-orange-500">加入购物车</text>
        </view>
        <view 
          class="flex-1 h-[88rpx] bg-orange-500 rounded-[8rpx] flex items-center justify-center"
          @tap="buyNow"
        >
          <text class="text-[32rpx] font-medium text-white">立即购买</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import Taro from '@tarojs/taro'

/**
 * 商品详情页面 - 展示商品详细信息和规格选择
 * 性能优化：图片懒加载，规格选择实时计算价格
 */

interface ProductDetail {
  id: number
  name: string
  description: string
  detailDescription: string
  price: number
  image: string
  sales: number
  rating: number
}

interface Option {
  id: number
  name: string
  price?: number
}

// 响应式数据
const defaultProductImage = 'http://www.dzgktf.com/templets/default/images/wtyt.jpg'
const quantity = ref(1)
const selectedSize = ref(1)
const selectedTemp = ref(1)
const selectedSweet = ref(1)

// 商品详情数据
const productDetail = ref<ProductDetail>({
  id: 1,
  name: '珍珠奶茶',
  description: '经典珍珠奶茶，香浓顺滑，Q弹珍珠',
  detailDescription: '精选优质茶叶，配以新鲜牛奶和Q弹珍珠，口感丰富层次分明。每一口都能感受到茶香与奶香的完美融合，珍珠的弹牙口感更是让人回味无穷。',
  price: 18,
  image: defaultProductImage,
  sales: 1580,
  rating: 4.8
})

// 规格选项
const sizeOptions = ref<Option[]>([
  { id: 1, name: '中杯', price: 0 },
  { id: 2, name: '大杯', price: 3 },
  { id: 3, name: '超大杯', price: 6 }
])

const tempOptions = ref<Option[]>([
  { id: 1, name: '热饮' },
  { id: 2, name: '常温' },
  { id: 3, name: '少冰' },
  { id: 4, name: '正常冰' },
  { id: 5, name: '多冰' }
])

const sweetOptions = ref<Option[]>([
  { id: 1, name: '无糖' },
  { id: 2, name: '三分糖' },
  { id: 3, name: '五分糖' },
  { id: 4, name: '七分糖' },
  { id: 5, name: '全糖' }
])

// 计算属性
const totalPrice = computed(() => {
  const basePrice = productDetail.value.price
  const sizePrice = sizeOptions.value.find(s => s.id === selectedSize.value)?.price || 0
  return (basePrice + sizePrice) * quantity.value
})

// 方法
const goBack = () => {
  Taro.navigateBack()
}

const selectSize = (size: Option) => {
  selectedSize.value = size.id
}

const selectTemp = (temp: Option) => {
  selectedTemp.value = temp.id
}

const selectSweet = (sweet: Option) => {
  selectedSweet.value = sweet.id
}

const increaseQuantity = () => {
  quantity.value++
}

const decreaseQuantity = () => {
  if (quantity.value > 1) {
    quantity.value--
  }
}

const addToCart = () => {
  const selectedSizeOption = sizeOptions.value.find(s => s.id === selectedSize.value)
  const selectedTempOption = tempOptions.value.find(t => t.id === selectedTemp.value)
  const selectedSweetOption = sweetOptions.value.find(s => s.id === selectedSweet.value)
  
  const cartItem = {
    id: Date.now(), // 使用时间戳作为唯一ID
    name: `${productDetail.value.name}(${selectedSizeOption?.name})`,
    price: totalPrice.value / quantity.value,
    image: productDetail.value.image,
    quantity: quantity.value,
    selected: true,
    specifications: {
      size: selectedSizeOption?.name,
      temperature: selectedTempOption?.name,
      sweetness: selectedSweetOption?.name
    }
  }
  
  console.log('已添加到购物车:', cartItem)
  
  Taro.showToast({
    title: '已加入购物车',
    icon: 'success',
    duration: 1500
  })
  
  // 显示操作选择
  setTimeout(() => {
    Taro.showModal({
      title: '添加成功',
      content: '商品已加入购物车，是否前往购物车查看？',
      success: (res) => {
        if (res.confirm) {
          // 跳转到购物车
          Taro.switchTab({
            url: '/pages/cart/index'
          })
        } else {
          // 返回上一页
          Taro.navigateBack()
        }
      }
    })
  }, 1500)
}

const buyNow = () => {
  const selectedSizeOption = sizeOptions.value.find(s => s.id === selectedSize.value)
  const selectedTempOption = tempOptions.value.find(t => t.id === selectedTemp.value)
  const selectedSweetOption = sweetOptions.value.find(s => s.id === selectedSweet.value)
  
  const orderItem = {
    id: Date.now(),
    name: `${productDetail.value.name}(${selectedSizeOption?.name})`,
    price: totalPrice.value / quantity.value,
    image: productDetail.value.image,
    quantity: quantity.value,
    specifications: {
      size: selectedSizeOption?.name,
      temperature: selectedTempOption?.name,
      sweetness: selectedSweetOption?.name
    }
  }
  
  console.log('立即购买:', orderItem)
  
  // 跳转到结算页面
  const orderData = JSON.stringify([orderItem])
  Taro.navigateTo({
    url: `/pages/checkout/index?items=${encodeURIComponent(orderData)}`
  })
}

// 生命周期
onMounted(() => {
  console.log('商品详情页面加载完成')
  // 这里可以根据路由参数加载具体商品信息
})
</script>

<style lang="scss" scoped>
.cursor-pointer {
  cursor: pointer;
}

.leading-\[1\.6\] {
  line-height: 1.6;
}

.gap-\[16rpx\] {
  gap: 16rpx;
}

.flex-wrap {
  flex-wrap: wrap;
}

.w-full {
  width: 100%;
}

.h-\[88rpx\] {
  height: 88rpx;
}

.text-\[32rpx\] {
  font-size: 32rpx;
}

.text-\[28rpx\] {
  font-size: 28rpx;
}

.flex-1 {
  flex: 1;
}

.pt-\[88rpx\] {
  padding-top: 88rpx;
}
</style> 